import React, {useState, useEffect} from "react";
import { Transfer } from "antd";
import {ProTransferBox} from '../styled'

interface IProps {
    setModerators(arr: number[]): void
}

function ProTransfer(props: IProps) {

    let [mockData, setMockData] = useState<any>([]);

    let [targetKeys, SetTargetKeys] = useState([]);

    const { setModerators } = props;

    const getMock = () => {

        const mockData = [];

        for (let i = 0; i < 8; i++) {
            let num = 1000 * (i + 1);
            const data = {
                key: i,
                title: num,
                description: `description of content${i}`,

            };
            mockData.push(data);
        }

        setMockData(mockData);

    };

    useEffect(() => {
        getMock();
    }, []);


    const handleChange = (targetKeys: any) => {
        let temp: number[] = [];
        targetKeys.forEach((index: any) => {
            temp.push(mockData[index].title);
        });
        // 传给父组件
        setModerators(temp);
        // 本组件显示
        SetTargetKeys(targetKeys);
    };

    const filterOption = (inputValue: any, option:any) => option.description.indexOf(inputValue) > -1;

    const handleSearch = (dir: any, value: any) => {
        console.log('search:', dir, value);
    };

    return (
        <ProTransferBox>
            <div className='title' >
                Members Moderators
            </div>
            <Transfer
                titles={['Available', 'Selected']}
                dataSource={mockData}
                showSearch
                targetKeys={targetKeys}
                onChange={handleChange}
                onSearch={handleSearch}
                filterOption={filterOption}
                render={(item: any) => item.title}
            />
        </ProTransferBox>
    )
}

export default React.memo(ProTransfer)